<template>
	<view class="search-wrap fboxRow Xcenter flex1">
		<view class="search-box fboxRow Ycenter mt32">
			<u-search
				:placeholder="placeholder"
				v-model="_keyword"
				:show-action="false"
				shape="square"
				bgColor="none"
				placeholder-color="#6B707C"
				search-icon-color="#6B707C"
				searchIconSize="44rpx"
				:inputStyle="{'font-size':'28rpx'}"
				@search="searchEnter"
				@custom="searchEnter"
				@change="searchChange"
				@clear="searchClear"
			></u-search>
			<view v-if="isBtn" class="btn fboxRow Ycenter Xcenter font26 " @click="searchEnter">搜索</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		placeholder: {
			type: String,
			default: '请输入'
		},
		keyword: {
			type: String,
			default: ''
		},
		isBtn: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {};
	},
	computed: {
		_keyword: {
			get() {
				return this.keyword;
			},
			set(val) {
				this.$emit('update:keyword', val);
			}
		}
	},
	methods: {
		searchEnter() {
			this.$emit('search');
		},
		searchClear() {
			this._keyword = '';
			this.$emit('search');
		},
		searchChange(e) {
			this.$emit('change');
		}
	}
};
</script>

<style lang="scss" scoped>
.search-wrap {
	width: 100%;
	height: 112rpx;
	overflow: hidden;
	padding: 0 24rpx;
}
// .search-box{ width: 702rpx;height: 72rpx;background: rgba(247,249,255,0.0314);border-radius: 12rpx 12rpx 12rpx 12rpx;}
.search-box {
	width: 100%;
	// min-width: 702rpx;
	height: 72rpx;
	background: var(--searchViewBackColor);
	border-radius: 12rpx;
}
.btn {
	width: 116rpx;
	height: 72rpx;
	background: var(--contentSearchTitleColor);
	color: var(--contentBgImageTitleColor);
	border-radius: 0rpx 12rpx 12rpx 0rpx;
}
</style>
